<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <div class="mt-2 mb-2 w-full bg-white h-full">
      <Tabs v-model:activeKey="activeKey" centered class="h-full">
        <TabPane
          v-for="(item, index) in tabList"
          :key="item.component"
          :tab="item.title"
          class="h-full"
        >
          <!-- forceRender -->
          <div class="w-900px mx-auto h-full">
            <component :is="item.component" />
          </div>
        </TabPane>
      </Tabs>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, computed, unref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { Tabs, TabPane } from 'ant-design-vue';

  import ConfigManagement from './modules/configManagement/ConfigManagement.vue';
  import MailboxConfiguration from './modules/mailboxConfiguration/MailboxConfiguration.vue';
  import FlowBtnConfiguration from './modules/flowBtnConfiguration/FlowBtnConfiguration.vue';
  import ProcessColumnsConfiguration from './modules/processColumnsConfiguration/ProcessColumnsConfiguration.vue';
  import UserLevel from './modules/userLevel/UserLevel.vue';
  import SafeConfiguration from './modules/safeConfiguration/SafeConfiguration.vue';

  export default defineComponent({
    name: 'ConfigurationManagement',
    components: {
      PageWrapper,
      Tabs,
      TabPane,
      ConfigManagement,
      MailboxConfiguration,
      FlowBtnConfiguration,
      ProcessColumnsConfiguration,
      UserLevel,
      SafeConfiguration,
    },
    setup() {
      const activeKey = ref('ConfigManagement');
      //tabs
      const tabList = ref([
        {
          title: '配置管理',
          key: 'ConfigManagement',
          component: 'ConfigManagement',
        },
        {
          title: '邮箱配置',
          key: 'MailboxConfiguration',
          component: 'MailboxConfiguration',
        },
        {
          title: '流程按钮配置',
          key: 'FlowBtnConfiguration',
          component: 'FlowBtnConfiguration',
        },
        {
          title: '处理过程配置',
          key: 'ProcessColumnsConfiguration',
          component: 'ProcessColumnsConfiguration',
        },
        {
          title: '用户等级',
          key: 'UserLevel',
          component: 'UserLevel',
        },
        {
          title: '安全配置',
          key: 'SafeConfiguration',
          component: 'SafeConfiguration',
        },
      ]);

      return {
        tabList,
        activeKey,
      };
    },
  });
</script>
<style lang="less" scoped>
  :deep(.ant-card-head) {
    min-height: 37px;
  }
  :deep(.ant-card-head-title) {
    padding: 0;
    line-height: 35px;
  }

  :deep(.ant-tabs-content) {
    height: 100%;
  }
  :deep(.ant-table-title) {
    min-height: 0;
  }
</style>
